<template>
  <div id="app">
    <div class="header">头部</div>
    <router-view class="main"></router-view>
    <div class="footer">

      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

      <!-- 
           <router-link to="/">首页</router-link>    默认会被渲染成一个 `<a>` 标签
          /      根路由
          /list  一级路由
          /list/a   二级路由

          路由匹配模式默认是包含模式, 匹配的当前路由及其父路由都会被激活 -> 添加router-link-active(可以自定义)

          属性:
            to: 指定链接 -> 要跳转的路由地址
            tag: 指定router-link渲染的标签
            exact:  精准匹配(路由匹配模式默认是包含模式)

            active-class: 包含模式,被激活的导航(router-link)添加的类名(默认router-link-active)
            exact-active-class:  精准模式,被激活的导航(router-link)添加的类名(默认:router-link-exact-active)


       -->

      <router-link exact-active-class="exact-active-aaa" active-class="active-aaa" exact to="/">首页</router-link>
      <router-link exact-active-class="exact-active-aaa" active-class="active-aaa" exact to="/list">列表</router-link>
      <router-link exact-active-class="exact-active-aaa" active-class="active-aaa" exact to="/car">购物车</router-link>
      <router-link exact-active-class="exact-active-aaa" active-class="active-aaa" exact to="/mine">我的</router-link>
    </div>
  </div>
</template>

<style>
/* 
      scoped 配置
      如果不加 scoped属性 -> 此样式默认全局的,对所有页面生效
      如果添加了 scoped属性 -> 只对当前页面生效
    */


html {
  /* 设置rem:  1rem=100px(设计图) */
  font-size: -webkit-calc(100vw/7.5);
}

body {
  font-size: 0.24rem;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#app .main {
  flex: 1;
  overflow-y: auto;
}

#app .header{
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  border-bottom: 1px solid #707070;
}

#app .footer {
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  display: flex;
  border-top: 1px solid #707070;
}


#app .footer a,
#app .footer li {
  flex: 1;
}


/* 关于活跃状态的样式 */

/* router-link 包含匹配时的活跃状态的类名 */
/* .router-link-active,.active-aaa{
  color: #fff;
  background-color: #6ff;
} */
/* router-link 精准匹配时 的活跃状态的类名 */
.router-link-exact-active,
.exact-active-aaa {
  color: #fff;
  background-color: #f00;
}
</style>
